<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: none;
            list-style: none;
        }

        body {
            padding: 50px 0;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: linear-gradient(90deg, #ffafbd, #ffc3a0);
            background-repeat: no-repeat;
        }

        .contianer {
            padding: 30px 40px 20px;
            text-align: center;
            width: 440px;
            margin: 0 auto;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            background: #f2f2f2;
        }

        .heading {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .img-wrapper {
            width: 80px;
            margin-right: 10px;
        }

        .title1 {
            transform: rotate(3deg);
            font-size: 21px;
            padding: 0.25em 0.8em 0.15em;
            border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
            color: #fff;
            background: #fe7345;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .form-field {
            margin-top: 25px;
        }

        .title2 {
            font-size: 22px;
            text-align: center;
            margin-bottom: 18px;
        }

        .form-wrapper {
            display: flex;
            justify-content: center;
        }

        .form-input {
            display: inline-block;
            flex-grow: .65;
            margin-right: 15px;
        }

        .form-input input {
            width: 100%;
            border: none;
            border-bottom: 3px dashed #fe7345;
            padding: 5px 0 3px;
            font-size: 18px;
            background: transparent;
        }

        .submit-btn {
            position: relative;
            transform: rotate(4deg);
            border-radius: 6px;
            transition: transform .25s cubic-bezier(.175, .885, .32, 1.275);
        }

        .submit-btn span {
            position: relative;
            display: block;
            font-size: 16.5px;
            padding: 0.34em 0.84em;
            border: 2px solid #494a4b;
            border-radius: inherit;
            background-color: #fff;
        }

        .empty-todos {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 30px;
            gap: 10px;
            -webkit-animation: zoom-132cabf7 .45s ease-in-out;
            animation: zoom-132cabf7 .45s ease-in-out;
        }

        .empty-todos .msg {
            font-size: 17px;
            padding-top: 5px;
            color: rgba(73, 74, 75, .45);
        }
        .active{
            background-color: orange;
            color: #fff;
        }
        li{
            margin-top: 5px;
        }
        li input{
            display: block;
            margin-top: 5px;
            float: left;
            
        }
        
        li span{
            float: right;
        }
    </style>
</head>

<body>
    <div id="app">
        <main class="contianer">
            <header class="heading">
                <div class="img-wrapper">
                    <img src="https://www.todolist.cn/img/note.75134fb0.svg" alt="Note">
                </div>
                <div class="title1">To-Do List</div>
            </header>
            <div class="form-field">
                <h1 class="title2">~ Today I need to ~</h1>
                <form>
                    <div class="form-input">
                        <input v-model="val" placeholder="Add new todo...">
                    </div>
                    <button type="submit" class="submit-btn">
                        <span  @click.prevent = "addItem">Submit</span>
                    </button>
                </form>
            </div>
            <div class="empty-todos">
                <span class="msg">Congrat, you have no more tasks to do</span>
            </div>
            <ul>                
                <li :class="{
                    active:item.check
                }" v-for = "(item,index) in list"><input type="checkbox" v-model = "item.check">{{item.title}} <span @click = "delItem(index)">x</span></li>
            </ul>
        </main>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                val:"",
                list:[]
            },
            methods:{
                addItem(){
                    this.list.push({title:this.val,check:false})
                    this.val = ""
                },
                delItem(index){
                    this.list.splice(index,1)
                }
            }
        })
    </script>
</body>

</html>